<template>
  <page-wrap hideTab back stayStill title="认证企业" bgColor="#fff">
    <view class="content-box">
      <u-form
        :model="form"
        ref="uForm"
        label-position="left"
        label-width="150rpx"
      >
        <u-form-item label="企业名称">
          <text class="content-text">
            {{ form.cname }}
          </text>
        </u-form-item>

        <u-form-item label="联系人"
          ><text class="content-text">
            {{ form.name }}
          </text></u-form-item
        >
        <u-form-item label="手机号"
          ><text class="content-text">
            {{ form.tel }}
          </text></u-form-item
        >
        <u-form-item label="验证码" class="telCode-box" prop="telCode">
          <u-field
            v-model="form.telCode"
            placeholder="请输入验证码"
            placeholder-style="color: #bbbbbb;"
            type="number"
            label-width="0"
            :clearable="false"
            :border-bottom="false"
          >
            <text class="send-code" slot="right" @click="handleSendCode">{{
              sendTelCode.codeText
            }}</text>
          </u-field>
        </u-form-item>
      </u-form>
      <!-- <u-button class="submit" type="error" @click="submit">确认加入</u-button> -->
      <button class="submit" @click="submit">
        确定认证
      </button>
    </view>
  </page-wrap>
</template>

<script>
import {
  getJoinCompanyInfo,
  getJoinCompanyMsCode,
  confirmJoinCompany,
} from "@/api/modules/company";
export default {
  data() {
    return {
      companyId: uni.getStorageSync("company-id") || "cm1638954851651",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyInfo: {},
      form: {
        cname: "",
        name: "",
        tel: "",
        telCode: "",
      },
      rules: {
        telCode: [
          { required: true, message: "请输入验证码", trigger: ["blur"] },
        ],
      },
      sendTelCode: {
        codeText: "获取验证码",
        codeTimer: null,
      },
      sending: false,
    };
  },
  onShow() {
    this.getJoinCompanyInfo();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      console.log("开始验证------");
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          console.log("验证通过");
          this.confirmJoinCompany();
        } else {
          console.log("验证失败");
        }
      });
    },
    handleSendCode() {
      if (this.sending || this.sendTelCode.codeTimer) {
        console.log("正在发送");
        return;
      }

      console.log("发送验证");
      this.sendMsCode();
    },

    sendMsCode() {
      let param = {
        companyId: this.companyId,
        personId: this.personId,
      };
      console.log("请求参数---------", param);
      this.sending = true;
      // this.sendTelCode.codeText = '发送中...';
      let sec = 60;
      this.sendTelCode.codeText = `${--sec} s`;
      this.sendTelCode.codeTimer = setInterval(() => {
        this.sendTelCode.codeText = `${--sec} s`;
        if (sec < 1) {
          clearInterval(this.sendTelCode.codeTimer);
          this.sendTelCode.codeTimer = null;
          this.sendTelCode.codeText = "获取验证码";
        }
      }, 1000);
      getJoinCompanyMsCode(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.form.telCode = res.data;
        } else {
          clearInterval(this.sendTelCode.codeTimer);
          this.sendTelCode.codeTimer = null;
          this.sendTelCode.codeText = "获取验证码";
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
          duration: 3000,
        });
      }).finally(() => {
        this.sending = false;
      });
    },
    getJoinCompanyInfo() {
      let param = {
        companyId: this.companyId,
        personId: this.personId,
      };
      console.log("请求参数---------", param);
      getJoinCompanyInfo(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.companyInfo = res.data;
          this.form.name = this.companyInfo.pname;
          this.form.cname = this.companyInfo.cname;
          this.form.tel = this.companyInfo.mobile;
          return;
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
        });
      });
    },
    confirmJoinCompany() {
      uni.showLoading({
        title: "正在认证...",
      });
      console.log("请求开始确认---------");
      let param = {
        companyId: this.companyId,
        personId: this.personId,
        code: this.form.telCode,
      };
      console.log("请求参数---------", param);
      confirmJoinCompany(param).then((res) => {
        console.log(res);
        uni.hideLoading();
        clearInterval(this.sendTelCode.codeTimer);
        this.$set(this.sendTelCode, "codeTimer", null);
        this.$set(this.sendTelCode, "codeText", "获取验证码");
        if (res.code == 200) {
          /* 初始化定时器 */
          /* 重新打开个人中心 */
          uni.reLaunch({
            url: "/pages/companyCenter/index",
          });
        }
        uni.showToast({
          title: res.status_desc,
          icon: "none",
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .content-wrap {
  background-color: white;
}
.content-box {
  background-color: white;
  margin: 16rpx 32rpx;
  ::v-deep .u-form {
    .u-form-item {
      padding: 12rpx 0;
      .u-input input {
        font-size: inherit;
      }
      .u-form-item--left__content__label {
        margin-top: 14rpx;
        color: $uni-text-color-222;
      }
      .u-form-item__message {
        margin: 0 0 0 36rpx;
      }
    }
  }
  .content-text {
    color: $uni-text-color-888;
    font-size: $uni-font-size-nor;
    margin-left: 36rpx;
  }
  .send-code {
    border: 1px solid #f7f8fa;
    border-radius: 12rpx;
    padding: 12rpx;
    color: $uni-text-color-555;
    font-size: $uni-font-size-nor;
  }
  .submit {
    position: relative;
    margin: 200rpx 0rpx 0rpx 0rpx;
    border-radius: 12rpx;
    background-color: #f04646;
    color: #ffffff;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: $uni-font-size-lg;
  }
  .telCode-box {
    display: flex;
  }
}
</style>
